import { Spin } from '@arco-design/web-react';
import React from 'react';
import ReactDOM from 'react-dom/client';

export default class LoadingMask {
  static div?: HTMLDivElement = undefined;
  static root?: ReactDOM.Root = undefined;
  static hide() {
    if (!!this.div && !!this.root) {
      this.root.unmount();
      document.body.removeChild(this.div);
      this.root = undefined;
      this.div = undefined;
      window.document.body.style.overflow = '';
    }
  }

  static show(tips?: string) {
    LoadingMask.hide();

    window.document.body.style.overflow = 'hidden';
    this.div = document.createElement('div');
    document.body.appendChild(this.div);
    this.root = ReactDOM.createRoot(this.div);
    this.root.render(
      <div className="loading-mask">
        <Spin dot size={30} />
        <div className="mt-20">{tips ?? '正在加载...'}</div>
      </div>
    );
  }
}
